"use strict";

var gl;
var points;

window.onload = function init(){
	var canvas = document.getElementById( "triangle-canvas" );
	gl = WebGLUtils.setupWebGL( canvas );
	if( !gl ){
		alert( "WebGL isn't available" );
	}

	// Three Vertices
	var vertice1 = [
		//第一个三角形
		0.5,1.0,
		0.2,0.2,
		1.0,0.5,
		//第二个三角形
		/* 0.5,0.5,
		 0.5,-0.5,
		 -0.5,-0.5, */
		 /* -1.0, -1.0,
		 1.0,  1.0,
		 1.0,  1.0 */
		 /* -0.5, -0.5,
		 0.0, 0.5,
		 0.5, -0.5 */
	];

	// Configure WebGL   坐标系：左上角、右下角，
	gl.viewport( 0, 0, canvas.width, canvas.height );
	//设定背景颜色。。。 最后是透明度的值
	gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

	// Load shaders and initialize attribute buffers
	//载入着色器
	var program = initShaders( gl, "vertex-shader", "fragment1-shader" );
	gl.useProgram( program );

	// Load the data into the GPU
	//绘制过程，先写入缓存区，然后GPU从缓存区读取
	var bufferId = gl.createBuffer();
	//当前程序在运行的buffer
	gl.bindBuffer( /*数组类型的buffer*/gl.ARRAY_BUFFER, bufferId );
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertice1 ), gl.STATIC_DRAW/*用于绘制的*/ );

	// Associate external shader variables with data buffer
	var vPosition = gl.getAttribLocation( program, "vPosition" );
	gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( vPosition );

	render1();
	
	var vertice2 = [
		//第一个三角形
		-0.5,0,
		-0.5,-0.5,
		0,0,
		//第二个三角形
		 0,-0.5, 
		 0,0,
		 -0.5,-0.5,
		 /* -1.0, -1.0,
		 1.0,  1.0,
		 1.0,  1.0 */
		 /* -0.5, -0.5,
		 0.0, 0.5,
		 0.5, -0.5 */
	];
	//载入着色器
	var program2 = initShaders( gl, "vertex-shader", "fragment2-shader" );
	gl.useProgram( program2 );
	
	// Load the data into the GPU
	//绘制过程，先写入缓存区，然后GPU从缓存区读取
	var bufferId2 = gl.createBuffer();
	//当前程序在运行的buffer
	gl.bindBuffer( /*数组类型的buffer*/gl.ARRAY_BUFFER, bufferId2 );
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertice2 ), gl.STATIC_DRAW/*用于绘制的*/ );
	
	// Associate external shader variables with data buffer
	var vPosition2 = gl.getAttribLocation( program2, "vPosition" );
	gl.vertexAttribPointer( vPosition2, 2, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( vPosition2 );
	
	render2() ;
	
}

function render1(){
	gl.clear( gl.COLOR_BUFFER_BIT );
	//gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
	gl.drawArrays( gl.TRIANGLES, 0, 3 );
	//gl.drawArrays( gl.TRIANGLE_FANS, 3, 6 );
}

function render2(){
	/* gl.clear( gl.COLOR_BUFFER_BIT ); */
	//gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
	gl.drawArrays( gl.TRIANGLES, 0, 6 );
	//gl.drawArrays( gl.TRIANGLE_FANS, 3, 6 );
}